<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Components</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
	<link rel="stylesheet" href="assets/css/ready.css">
	<link rel="stylesheet" href="assets/css/demo.css">
</head>
<body>
	<!-- <div class="wrapper">
		<div class="main-header">
			<div class="logo-header">
				<a href="index.html" class="logo">
					Ready Dashboard
				</a>
				<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
			</div>
			<nav class="navbar navbar-header navbar-expand-lg">
				<div class="container-fluid">
					
					<form class="navbar-left navbar-form nav-search mr-md-3" action="">
						<div class="input-group">
							<input type="text" placeholder="Search ..." class="form-control">
							<div class="input-group-append">
								<span class="input-group-text">
									<i class="la la-search search-icon"></i>
								</span>
							</div>
						</div>
					</form>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-envelope"></i>
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-bell"></i>
								<span class="notification">3</span>
							</a>
							<ul class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">
								<li>
									<div class="dropdown-title">You have 4 new notification</div>
								</li>
								<li>
									<div class="notif-center">
										<a href="#">
											<div class="notif-icon notif-primary"> <i class="la la-user-plus"></i> </div>
											<div class="notif-content">
												<span class="block">
													New user registered
												</span>
												<span class="time">5 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-success"> <i class="la la-comment"></i> </div>
											<div class="notif-content">
												<span class="block">
													Rahmad commented on Admin
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-img"> 
												<img src="assets/img/profile2.jpg" alt="Img Profile">
											</div>
											<div class="notif-content">
												<span class="block">
													Reza send messages to you
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-danger"> <i class="la la-heart"></i> </div>
											<div class="notif-content">
												<span class="block">
													Farrah liked Admin
												</span>
												<span class="time">17 minutes ago</span> 
											</div>
										</a>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);"> <strong>See all notifications</strong> <i class="la la-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false"> <img src="assets/img/fangzebin.jpg" alt="user-img" width="36" class="img-circle"><span >方泽斌</span></span> </a>
							<ul class="dropdown-menu dropdown-user">
								<li>
									<div class="user-box">
										<div class="u-img"><img src="assets/img/fangzebin.jpg" alt="user"></div>
										<div class="u-text">
											<h4>方泽斌</h4>
											<p class="text-muted">hello@themekita.com</p><a href="一.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a></div>
										</div>
									</li>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/curriculum_vitae/"><i class="ti-user"></i> 我的简历</a>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/fangzebin/"></i> 我的博客</a>
									<a class="dropdown-item" href="index.html"><i class="fa fa-power-off"></i> 登出</a>
								</ul>
								<!-- /.dropdown-user -->
							<!-- </li>
						</ul>
					</div>
				</nav>
			</div>
			<div class="sidebar">
				<div class="scrollbar-inner sidebar-wrapper">
					<div class="user">
						<div class="photo">
							<img src="assets/img/fangzebin.jpg">
						</div>
						<div class="info">
							<a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									方泽斌
									<span class="user-level">Administrator</span>
									<span class="caret"></span>
								</span>
							</a>
							<div class="clearfix"></div>

							<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
								<ul class="nav">
									<li>
										<a href="https://fang_se_bin.gitee.io/curriculum_vitae/">
											<span class="link-collapse">我的简历</span>
										</a>
									</li>
									<li>
										<a href="https://fang_se_bin.gitee.io/fangzebin/">
											<span class="link-collapse">我的博客</span>
										</a>
									</li>
									<li>
										<a href="index.html">
											<span class="link-collapse">登出</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="nav">
						<li class="nav-item">
							<a href="一.html">
								<i class="la la-dashboard"></i>
								<p>数据总故事</p>
								<span class="badge badge-count">5</span>
							</a>
						</li>
						<li class="nav-item active">
							<a href="二.html">
								<i class="la la-table"></i>
								<p>年末常住人口</p>
								<span class="badge badge-count">14</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="三.html">
								<i class="la la-keyboard-o"></i>
								<p>出生率与死亡率</p>
								<span class="badge badge-count">50</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="四.html">
								<i class="la la-th"></i>
								<p>平均年工资</p>
								<span class="badge badge-count">6</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="五.html">
								<i class="la la-bell"></i>
								<p>自然灾害</p>
								<span class="badge badge-success">3</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="六.html">
								<i class="la la-font"></i>
								<p>总结与建议</p>
								<span class="badge badge-danger">25</span>
							</a>
                        </li>
                        <li class="nav-item update-pro">
							<button  data-toggle="modal" data-target="#modalUpdate">
								<i class="la la-hand-pointer-o"></i>
                                <p>Update to pro</p>
							</button>
						</li>
						<li class="nav-item">
							<a href="https://gitee.com/fang_se_bin/python-final-project">
								<i class="la la-fonticons"></i>
								<p>技术文档</p>
							</a>
                        </li>
                        <li class="nav-item">
							<a href="https://data.stats.gov.cn/index.htm">
								<i class="la la-fonticons"></i>
								<p>数据来源</p>
							</a>
						</li>
						
					</ul>
				</div>
			</div> -->
			<!-- <div class="main-panel">
				<div class="content">
					<div class="container-fluid">
						<span id="stats_traffic" class="h2 font-weight-bold mb-0"></span>
                    </div> -->
                    <p class="mt-3 mb-0 text-muted text-sm">
                    </p> 
                  <!-- Page content -->
      <div class="container-fluid mt--0">
        <div class="row">
          <div class="col-xl-0 mb-0 mb-xl-0">
            <div class="card shadow">

              <div class="card-body">
  
  
                <div style="height: 100%;width: 200%">
					<!DOCTYPE html>
					<html>
					<head>
						<meta charset="UTF-8">
						<title>Awesome-pyecharts</title>
								<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
							<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/guangdong.js"></script>
					
					</head>
					<body>
						<div id="9f5d527e912147dca0f9abc20782fee6" class="chart-container" style="width:1200px; height:600px;"></div>
						<script>
							var chart_9f5d527e912147dca0f9abc20782fee6 = echarts.init(
								document.getElementById('9f5d527e912147dca0f9abc20782fee6'), 'white', {renderer: 'canvas'});
							var option_9f5d527e912147dca0f9abc20782fee6 = {
						"animation": true,
						"animationThreshold": 2000,
						"animationDuration": 1000,
						"animationEasing": "cubicOut",
						"animationDelay": 0,
						"animationDurationUpdate": 300,
						"animationEasingUpdate": "cubicOut",
						"animationDelayUpdate": 0,
						"color": [
							"#c23531",
							"#2f4554",
							"#61a0a8",
							"#d48265",
							"#749f83",
							"#ca8622",
							"#bda29a",
							"#6e7074",
							"#546570",
							"#c4ccd3",
							"#f05b72",
							"#ef5b9c",
							"#f47920",
							"#905a3d",
							"#fab27b",
							"#2a5caa",
							"#444693",
							"#726930",
							"#b2d235",
							"#6d8346",
							"#ac6767",
							"#1d953f",
							"#6950a1",
							"#918597"
						],
						"series": [
							{
								"type": "map",
								"name": "\u5e7f\u4e1c\u7701\u5404\u5e02\u57fa\u672c\u517b\u8001\u4fdd\u9669",
								"label": {
									"show": true,
									"position": "top",
									"margin": 8
								},
								"mapType": "\u5e7f\u4e1c",
								"data": [
									{
										"name": "\u6df1\u5733\u5e02",
										"value": 5363531
									},
									{
										"name": "\u5e7f\u5dde\u5e02",
										"value": 3354970
									},
									{
										"name": "\u4e2d\u5c71\u5e02",
										"value": 834511
									},
									{
										"name": "\u73e0\u6d77\u5e02",
										"value": 625518
									},
									{
										"name": "\u6c5f\u95e8\u5e02",
										"value": 600201
									},
									{
										"name": "\u60e0\u5dde\u5e02",
										"value": 531906
									},
									{
										"name": "\u6c55\u5934\u5e02",
										"value": 328519
									},
									{
										"name": "\u6e5b\u6c5f\u5e02",
										"value": 317597
									},
									{
										"name": "\u8302\u540d\u5e02",
										"value": 261929
									},
									{
										"name": "\u8087\u5e86\u5e02",
										"value": 252590
									},
									{
										"name": "\u6e05\u8fdc\u5e02",
										"value": 249045
									},
									{
										"name": "\u97f6\u5173\u5e02",
										"value": 238925
									},
									{
										"name": "\u6885\u5dde\u5e02",
										"value": 235298
									},
									{
										"name": "\u63ed\u9633\u5e02",
										"value": 212710
									},
									{
										"name": "\u6c55\u5c3e\u5e02",
										"value": 98282
									}
								],
								"roam": true,
								"aspectScale": 0.75,
								"nameProperty": "name",
								"selectedMode": false,
								"zoom": 1,
								"mapValueCalculation": "sum",
								"showLegendSymbol": true,
								"emphasis": {},
								"rippleEffect": {
									"show": true,
									"brushType": "stroke",
									"scale": 2.5,
									"period": 4
								}
							}
						],
						"legend": [
							{
								"data": [
									"\u5e7f\u4e1c\u7701\u5404\u5e02\u57fa\u672c\u517b\u8001\u4fdd\u9669"
								],
								"selected": {
									"\u5e7f\u4e1c\u7701\u5404\u5e02\u57fa\u672c\u517b\u8001\u4fdd\u9669": true
								},
								"show": true,
								"padding": 5,
								"itemGap": 10,
								"itemWidth": 25,
								"itemHeight": 14
							}
						],
						"tooltip": {
							"show": true,
							"trigger": "item",
							"triggerOn": "mousemove|click",
							"axisPointer": {
								"type": "line"
							},
							"showContent": true,
							"alwaysShowContent": false,
							"showDelay": 0,
							"hideDelay": 100,
							"textStyle": {
								"fontSize": 14
							},
							"borderWidth": 0,
							"padding": 5
						},
						"title": [
							{
								"text": "\u5e7f\u4e1c\u7701\u5404\u5e02\u57fa\u672c\u517b\u8001\u4fdd\u9669",
								"subtext": "\u6570\u636e\u6765\u6e90\uff1a\u5e7f\u4e1c\u7edf\u8ba1\u5e74\u9274",
								"padding": 5,
								"itemGap": 10
							}
						],
						"visualMap": {
							"show": true,
							"type": "piecewise",
							"min": 0,
							"max": 5363531,
							"inRange": {
								"color": [
									"lightskyblue",
									"yellow",
									"orangered"
								]
							},
							"calculable": true,
							"inverse": false,
							"splitNumber": 5,
							"orient": "vertical",
							"showLabel": true,
							"itemWidth": 20,
							"itemHeight": 14,
							"borderWidth": 0
						}
					};
							chart_9f5d527e912147dca0f9abc20782fee6.setOption(option_9f5d527e912147dca0f9abc20782fee6);
						</script>
					</body>
					</html>
					
					
					

</div>
</div>
</div>
</div>
<div class="col-xl-4">
	<div class="card shadow">
	  <div class="card-header bg-transparent">
		<div class="row align-items-center">
		  <div class="col">
			<h3>数据介绍：</h3>
			<!-- <h2 class="mb-0">养老服务价格</h2> -->
		  </div>
		</div>
	  </div>
	  <div class="card-body">
		<!-- Chart -->
		<div style="height: 100%;width: 100%">
		  <h4>2019年</h4>
		  <h4>广东省不同省市养老保险</h4>
		  <p> 1.2019年广东省不同省市养老保险排名第一的是深圳市，为5363531元，这个保险金额是广东省所有省市中最高的一个金额，可以看出深圳对养老方面的福利待遇还是挺优待的</p>
		  <p>2.2019年广东省不同省市养老保险排名最后一个价位的城市比较多，大多是在1072706.2元以下，每个城市在养老保险金额差距不是很大</p>
		<!-- </div>
	  </div>
	</div>
  </div>
</div> -->
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script>
	$( function() {
		$( "#slider" ).slider({
			range: "min",
			max: 100,
			value: 40,
		});
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ]
		});
	} );
</script>
</html>